<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        body{
            background-color: aqua;
        }

        .box{
            width: 200px;
            height: 200px;
            margin: 400px auto;
        }

        .box div{
            width: 0;
            height: 0;
        }

        .a1,.b1,.c1,.a2,.b2,.c2{
            border-radius: 50%;
            position: relative;
        }
        .a1{
            border-left: 200px solid transparent ;
			border-right: 200px solid transparent ;
            border-bottom: 200px solid transparent ;
			border-top: 200px solid white;
            top: -200px;
            left: -200px;
        }
        
        .a2{
			border-left: 190px solid transparent ;
			border-right: 190px solid transparent ;
            border-bottom: 190px solid transparent ;
			border-top: 190px solid aqua;
            top: -190px;
            left: -190px;
        }

        .b1{
            border-left: 180px solid transparent ;
			border-right: 180px solid transparent ;
            border-bottom: 180px solid transparent ;
			border-top: 180px solid white;
            top: -180px;
            left: -180px;
        }

        .b2{
            border-left: 170px solid transparent ;
			border-right: 170px solid transparent ;
            border-bottom: 170px solid transparent ;
			border-top: 170px solid aqua;
            top: -170px;
            left: -170px;
        }
        
        .c1{
            border-left: 160px solid transparent ;
			border-right: 160px solid transparent ;
            border-bottom: 160px solid transparent ;
			border-top: 160px solid white;
            top: -160px;
            left: -160px;
        }
       
        .c2{
            border-left: 150px solid transparent ;
			border-right: 150px solid transparent ;
            border-bottom: 150px solid transparent ;
			border-top: 150px solid aqua;
            top: -150px;
            left: -150px;
        }

        .a,.b,.c{
            transform-origin: bottom center;
        }

        .a{
            animation: a 1s linear infinite;
        }

        .b{
            animation: a 2s linear infinite;
        }

        .c{
            animation: a 3s linear infinite;
        }

        @keyframes a {
            100%{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">
            <div class="a1"><div class="a2"></div></div>
        </div>
        <div class="b">
            <div class="b1"><div class="b2"></div></div>
        </div>
        <div class="c">
            <div class="c1"><div class="c2"></div></div>
        </div>
    </div>
</body>
</html>